<template>
  <el-card>
    <template #header>
      懒加载指令
    </template>
    <img v-lazy src="https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg"  alt=""/>
  </el-card>
</template>
<script lang="ts" setup>
import {getImageList} from '@/api/fastMock'

let data = ref([])
let number = 0
const load = () => {
  if (number >= 5)return
  number += 1
  loadImage()
}

const loadImage = async () => {
  const res = await getImageList()
  data.value.push(...res)
}
onMounted(() => loadImage())
</script>

<style scoped lang="less">
//多列布局
img{
  width: 500px;
  height: 300px;
  margin-top: 1000px;
}
</style>

